<template>

	<view>
		<!-- 缩略图 -->
		<view>

			<view class="content-item">
				<view class="content-wrapper">
					<image class="content-image" :src="productInfo.iconUrl||'/static/index/img.png'"></image>
					<view class="content-details">
						<view class="content-info">
							<text class="title">{{productInfo.name||"—"}}</text>
							<view class="text-box">
								<text class="title">{{goods.title}}</text>
								<tag :text="'未上架'" :type="'warning'" :class="'tag-yellow'"></tag>
							</view>
							<view class="content-instruction">
								<text>作者：{{productInfo.createBy}}</text>
							</view>
							<view class="content-instruction">
								
								<text>上传时间：{{productInfo.createTime}}</text>
							</view>
							<view class="p-b-btn" @click="downloadData()">
								<image class="bag-icon" src="/static/index/download.png"></image>
							</view>

				
						</view>
					</view>
				</view>

			</view>

		</view>
		<view class="list-item">
		  <text>设置售价</text>
		  <view class="vertical-middle">
		    <input type="text" v-model="amount" placeholder="请输入价格" />
		  </view>
		</view>
		
		
		<view class="list-item">
		  <text>预计收入</text>
		  
		</view>
		
		
		<view class="data">
		  <view class="data-type" :class="{ 'active': activeTab === 'details' }" @click="switchTab('details')">数据详情</view>
		  <view class="data-type" :class="{ 'active': activeTab === 'hot' }" @click="switchTab('hot')">流通记录</view>
		</view>
		
		<view class="data-list">
		  <!-- 数据列表内容 -->
			<!-- 推荐数据列表 -->
			    <view v-if="activeTab === 'details'">
			      <view>
			      
			      	<uni-card title="数据详情">
			      		<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
			      	</uni-card>
			      
			      </view>
			      
			      <!-- 说明 -->
			      <view style="padding-bottom: 80px;">
			    
			      	<uni-card title="说明">
			      		<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
			      	</uni-card>
			      
			      </view>
			    </view>
			    
			    <!-- 热门数据列表 -->
			    <view v-if="activeTab === 'hot'">
			      <view class="data-item" v-for="(item, index) in hotData" :key="index" @click="goToDetail(item.id)">
			        <image class="data-img" :src="item.image"></image>
			        <!-- <view class="data-info">
			          <text class="data-id">{{ item.id }}</text>
			          <text class="data-time">{{ item.time }}</text>
			          <text class="data-price">{{ item.price }}</text>
			        </view> -->
			      </view>
			    </view>
		</view>




		<!-- 数据详情 -->
		

		<view class="price-box">

			<view class="bt-box">
				<button class="bt-pay" plain="true" @click="submit()">立即寄售</button>
			</view>
		</view>
	</view>


</template>

<script>
	import tag from "@/components/min/tag.vue";
	import {
		toPay
	} from '../../api/trade';
	import {
		getProductInfo
	} from "@/api/product";
	export default {
		data() {
			return {
				activeTab: 'details',

				orderList: '',
				productId: '',
				priceId: '',
				productInfo: {},
				

			};
		},
		onLoad(options) {
			// this.loadData(),

			this.productId = options.id;
			this.priceId = options.priceId

			console.log("pro:", this.productId);
			if (this.productId) {
				this.$api.msg(`点击了${this.productId}`);
			}
			this.loadData();
		},
		components:{
			tag
		},
		methods: {
			switchTab(tab) {
			  this.activeTab = tab;
			},
			showFullContent(item) {
				// handle displaying the full content of the selected item
				console.log(item.fullContent);
			},
			async loadData() {
				let data = await getProductInfo(this.productId);
				this.productInfo = data.data;
			},
			// 提交申请单
			async submit() {
				const parame = {
					"tradeCartList": [{
						"id": '',
						"number": 1,
						"priceId": this.priceId,
						"productId": this.productId
					}]
				};

				let res = await toPay(parame)

				if (res.code === 200) {

					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 2000
					});

				}
			},
			downloadData() {
			    // 获取数据的 fileUrl
			    const fileUrl = this.productInfo.fileUrl;
			    // 判断 fileUrl 是否存在
			    if (fileUrl) {
			      // 使用 uni.downloadFile API 下载文件
			      uni.downloadFile({
			        url: fileUrl,
			        success(res) {
			          // 下载成功后，可以进行一些操作，比如保存文件等
			          console.log('文件下载成功', res);
			        },
			        fail(err) {
			          // 下载失败时的处理
			          console.error('文件下载失败', err);
			        }
			      });
			    } else {
			      // 如果 fileUrl 不存在，提示用户数据文件不存在或无法下载
			      uni.showToast({
			        title: '数据文件不存在或无法下载',
			        icon: 'none',
			        duration: 2000
			      });
			    }
			  },
		}
	}
</script>

<style lang="scss">
	.content-item {
		margin: 10px 15px;

	}

	.content-wrapper {
		display: flex;
		align-items: center;
	}

	.content-image {
		width: 220upx;
		height: 220upx;
	}

	.content-details {
		flex: 1;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		/* 让内容垂直排列 */
		justify-content: space-between;
	}

	.content-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.content-title {
		font-size: 16px;
		max-height: 3.0em;
		/* 设置标题最多显示两行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 设置最大行数 */
		-webkit-box-orient: vertical;
		color: white;

	}

	.content-details {
		margin-top: 5px;
		/* 设置时间与标题间距 */
		color: darkgray;

	}

	.content-price {
		color: white;
		display: flex;
		justify-content: space-between;
	}
	.content-instruction{
		font-size: 12px;
	}
	.data {
	  display: flex;
	  justify-content: flex-start; /* 更改为 flex-start */
	  width: 100%;
	  margin-bottom: 20px;
	}
	
	.data-type {
	      cursor: pointer;
	      color: #fff;
	      margin: 10px 0;
	      padding: 0 20px;
	}
	
	.data-type.active {
	  border-bottom: 2px solid #0297e5;
	   padding-bottom: 5px; 
	}
	.data-list {
	  width: 100%;
	  box-sizing: border-box;
	}

	


	.expand-button {
		background-color: #007AFF;
		color: white;
		border: none;
		padding: 5px 10px;
		border-radius: 5px;
		float: right;
	}
	.p-b-btn{
		margin: 0px;
		padding-top: 5px;
		image{
			width: 25px;
			height: 25px;
		}
	}


	.price-box {
		    display: flex;
		    justify-content: flex-end;
		    align-items: baseline;
		    padding: 20rpx 30rpx;
		    font-size: 26rpx;
		    color: white;
		    padding: 10px 0;
		    position: fixed;
		    bottom: 0px;
		    z-index: 95;
		    display: flex;
		    align-items: center;
		    width: 100%;
		    background: #2f3045;

		.bt-box {
			margin-right: 20upx;

			.bt {
				border-radius: 50upx;
				width: 220upx;
				height: 75upx;
				border: darkgray 1px solid;
				color: #fff;
				font-size: $font-base +4upx;
			}

			.bt-pay {
				    border-radius: 50rpx;
				    width: 355px;
				    height: 75rpx;
				    border: #66c2ff 1px solid;
				    color: #fff;
				    font-size: 32rpx;
				    line-height: 75rpx;
					background: linear-gradient(to right, #2493f1, #14d1cc);
			}

		}
	}
	
	.list-item {
		
		font-size: 30rpx;
		margin: 10px 15px;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 15px 10px;
	  color: #fff;
	  background-color: #2f3045;
	  border-radius: 4px;
	  input{
		  color: #6e6f7e;
	  }
	}
</style>